<template>
  <section>
          <template v-for='item in tableData'> 
                <div class="item-product-list" @click="clickToDetail(item.prodKey)">
                  <div class="item-product-list-content">
                       <div class="product-label"><span v-if="item.platform==='aep'">电信AEP</span><span v-else-if="item.platform==='onenet'">中移OneNet</span></div>
                       <div class="item-header">
                         <div class="item-header-title"><span class="title">{{item.name}}</span></div>
                         <div class="item-header-tool">
                           <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                            <button class="delete-btn"></button>
                           </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                            <button class="edit-btn"></button>
                           </el-tooltip>
                         </div>
                       </div>
                       <div class="item-content">
                         <div class="item-content-left">
                           <p class="item-protocol">通信协议：{{item.protocol}}</p>
                           <p class="item-create-time">创建时间：{{utils.timestampToTime(item.createTime)}}</p>
                         </div>
                         <div class="item-content-right">
                           <p class="item-num">{{item.total}}个</p>
                           <p class="item-total">设备总数</p>
                         </div>
                         <div class="clear"></div>
                       </div>
                       <div class="item-bottom" style="height:40px;position:relative">
                           <span class="item-type">产品类型：{{item.typeName}}</span>
                          <el-button type="primary" style="position:absolute;right:0px;top:0px;" v-show="item.platform==='aep'||item.platform==='onenet'" @click.stop="updateDeviceList(item.prodKey)">同步设备</el-button>
                          <div class="clear"></div>
                       </div>
                  </div>
                </div>
            </template>
  </section>
</template>
<script type="text/ecmascript-6">
import debounce from 'lodash.debounce';
import { productService } from '@/services';
import { mapState } from 'vuex';
export default {
  data () {
    return {
      tableData: [],
    };
  },
  activated () {
    this.getProductList();
  },
  computed: mapState({
    pid: (state) => state.loginSysUserVo.pid,
  }),
  methods: {
    getProductList: debounce(async function() {
      this.tableData = await productService.getProductList(this.pid);
    }, 500),
    clickToDetail(prodKey) {
      // let { href } = this.$router.resolve({ path: '/productDetail'});
      // window.open(href, '_blank');
      this.$router.push({ path: '/productDetail', query: { prodKey: prodKey} });
    },
    async updateDeviceList (prodKey) {
      const {deviceAdd,deviceOut } = await productService.updateDeviceList(prodKey);
      this.open(deviceAdd,deviceOut);
    },
    open(listadd,listout) {

     var stringAdd = '新增';
     if(listadd.length>0){
       var buf = 0;
       for(var i=0;i<listadd.length;i++){
         var oib = listadd[i];
          if(buf>=2){
            stringAdd += (oib.deviceId+'等');
            break;
         }else{
            stringAdd += (oib.deviceId+',');
         }
          buf++;
       }
       if(listadd.length<=2){
          stringAdd = stringAdd.substring(0,stringAdd.length-1);
       }
       stringAdd+=( '共'+listadd.length+'个设备');
     }else{
       stringAdd = '';
     }

    var stringOut = '注销';
     if(listout.length>0){
       var buf = 0;
       for(var i=0;i<listout.length;i++){
         var oib = listout[i];
          if(buf>=2){
            stringOut += (oib.deviceId+'等');
            break;
         }else{
            stringOut += (oib.deviceId+',');
         }
          buf++;
       }
       if(listout.length<=2){
          stringOut = stringOut.substring(0,stringOut.length-1);
       }
       stringOut+=( '共'+listout.length+'个设备');
     }else{
       stringOut = '';
     }

     var connec = (listadd.length>0&&listout.length>0)?',':'';

     var total = stringAdd + connec + stringOut;
     
     if(listout.length==0&&listadd.length==0){
       total = '无变化';
     }


        this.$alert(total, '提示', {
          confirmButtonText: '确定',
          callback: action => {
             this.getProductList();
          }
        });
      }
  }
};
</script>
<style lang="scss">
.item-product-list {
  float: left;
  width: 33%;
}

.item-product-list-content{
   padding: 20px;
   border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: .3s;
    margin: 10px;
    position: relative;
    cursor: pointer;
}

.item-header{
  padding-bottom: 34px;
}

.item-header-title{
  width: 70%;
  float: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-header-title .title{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #2dc6f6;
    font-size: 18px;
    word-break: break-word;
}

.item-header-title .title-sub{
display: inline-block;
    max-width: 60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #71c167;
    font-size: 12px;   
}

.item-header-tool{
  width: 30%;
  float: left;
}

.item-content{
  width: 100%;
}

.item-content-left{
  width:70%;
  float: left;
}

.item-content-right{
  width:30%;
  float: left;
}

.item-protocol{
  line-height: 2.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-create-time{
  line-height: 2.2;
  font-size: 12px;
  color: #9e9e9e;
}

.item-num{
  line-height: 2.2;
  text-align: center;
  color: #2dc6f6;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-total{
  line-height: 2.2;
  text-align: center;
}

.item-bottom .item-type {
  float: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #71c167;
  font-size: 12px;   
}

.delete-btn{
  background: url('../../assets/delete.png');
  background-position:center;
  background-repeat:no-repeat;
  border: 0px;
  outline: none;
  width: 20px;
  height: 20px;
  padding: 0px;
  cursor: pointer;
  float:right;
}

.edit-btn{
  background: url('../../assets/edit.png');
  background-position:center;
  background-repeat:no-repeat;
  border: 0px;
  outline: none;
  width: 20px;
  height: 20px;
  padding: 0px;
  cursor: pointer;
  margin-right: 10px;
  float:right;
}

.product-label{
  position: absolute;
  left: 0px;
  top:0px;
}

.product-label span {
  background: #2dc6f6;
  padding: 2px;
  font-size: 12px;
  color: white;
}
.el-message-box__message p {
  word-wrap:break-word;
}
</style>
